<template>
  <!-- <div class="home" id="home">
    <div class="yu">
      <h3>你的余额</h3>
      <h5>${{num}}</h5>
    </div>
    
    <div class="box">
      <div class="left">
        <div>
          <div style="color:green">
            $ <span v-show="num>0">{{num}}</span>.00
          </div>
        </div>
      </div>

      <div class="right">
        <div>
          <div>支出</div>
          <div style="color:red">
            $ <span v-show="num<0">{{num}}</span>.00
          </div>
        </div>
      </div>
    </div>

   
    <div class="hander">
      <h3>历史记录 {{ arr.length }}</h3>
      <hr/>
      <div class="box-item"
      >

      </div>
    </div>
  </div> -->
  <div id="home">
    <div class="hander">
      <h3>你的余额</h3>
      <h5>${{ num }}</h5>
    </div>
    <!-- box -->
    <div class="box">
      <div class="left">
        <div>
          <div>收入</div>
          <div style="color: green">
            $<span v-show="num > 0">{{ num }}</span
            >.00
          </div>
        </div>
      </div>
      <div class="right">
        <div>
          <div>支出</div>
          <div style="color: red">
            $<span v-show="num < 0">{{ num }}</span
            >.00
          </div>
        </div>
      </div>
    </div>
    <!-- 历史记录 -->
    <div class="hander">
      <h3>历史记录：{{ arr.length }}</h3>
      <hr />
      <div
        class="box-item"
        v-for="(item, index) in arr"
        :key="index"
        :class="item.price > 0 ? 'b' : 'a'"
      >
        <div>
          <div class="del" @click="del(index)">X</div>
        </div>

        <div class="box-item-item">
          <div class="left">{{ item.username }}</div>
          <div class="rifht">{{ item.price }} <span></span></div>
        </div>
      </div>
    </div>
    <!-- 添加新交易 -->
    <div class="hander">
      <h3>添加新交易：</h3>
      <hr />
      <h5>交易名称</h5>
      <div class="box-item">
        <div class="box-item-item1">
          <input
            type="text"
            placeholder="输入名称"
            class="input"
            v-model="username"
            @keyup.enter="add"
          />
        </div>
      </div>

      <h5>金额<br />支出负数，收入正数</h5>
      <div class="box-item">
        <div class="box-item-item1">
          <input
            type="text"
            placeholder="输入名称"
            class="input"
            v-model="price"
            @keyup.enter="add"
          />
        </div>
      </div>
      <button @click="add">添加交易</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "HzyHomeView",

  data() {
    return {
      username: "",
      price: "",
      arr:JSON.parse(localStorage.getItem("list"))||[], 
      num:JSON.parse(localStorage.getItem("nums"))
    };
  },

  mounted() {},

  methods: {
   add() {
      var obj = { username: this.username, price: this.price };
      if (this.username == "" || this.price == "") {
        return alert("金额和名称不能为空");
      }
      if (!Number(this.price)) {
        return alert("交易内容请输数字");
      }
      this.arr.push(obj);
      var a = Number(this.price);
      this.num += a;
    },
    del(index) {
      var a = Number(this.arr[index].price);
      this.num -= a;
      this.arr.splice(index, 1);
    },
  },
    watch: {
    num: {
      handler(val) {
        localStorage.setItem("nums", JSON.stringify(val));
      },
      deep: true,
    },
    arr: {
      handler(val) {
        localStorage.setItem("list", JSON.stringify(val));
      },
      deep: true,
    },
  },
  mixins: [],
};
</script>

<style  lang="scss">
.a {
  border-right: 5px solid red;
}
.b {
  border-right: 5px solid green;
}
button {
  width: 300px;
  height: 30px;
  margin-top: 20px;
  // background-color: rgb(248, 4, 158);
}
.input {
  width: 100%;
  height: 100%;
  // background-color: rgb(248, 4, 158);
}
.box-item-item1 {
  width: 300px;
  height: 30px;
  border: 1px solid black;
}
.box-item:hover .del {
  display: block;
}
.box-item {
  width: 330px;
  height: 30px;
  display: flex;
  align-items: center;
  .del {
    width: 30px;
    height: 20px;
    display: none;
  }
  .box-item-item {
    width: 270px;
    height: 30px;
    border: 1px solid black;
    display: flex;
    justify-content: space-between;
  }
}
#home {
  width: 500px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid black;
  // background-color: rgb(248, 4, 158);
  .hander {
    width: 300px;
  }
  .box {
    width: 300px;
    height: 150px;
    border: 1px solid black;
    display: flex;
    .left {
      flex: 1;
      border-right: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
      div {
        display: flex;

        justify-content: center;
        align-items: center;
        width: 100px;
      }
    }
    .right {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      div {
        display: flex;

        justify-content: center;
        align-items: center;
        width: 100px;
      }
    }
  }
}
</style>